@PickerAreaWidth: 200px;

#ColorPicker {
  width: 100%;
  height: 30px;
  position: relative;
  .ColorDisplay {
    border: none;
    width: 100%;
    height: 100%;
    background: none;
    outline: none;
    text-indent: 0.5em;
  }
  .PickerAreaPopups {
    width: auto;
    height: 200px;
    position: absolute;
    top: 100%;
    z-index: 1;
    display: flex;
    & > * {
      float: left;
    }
    .PickerArea {
      width: @PickerAreaWidth;
      height: 100%;
      background-color: white;
      position: relative;
      cursor: crosshair;
      overflow: hidden;
      .ColorSlidingBlock {
        width: 10px;
        height: 10px;
        box-sizing: border-box;
        border-radius: 100%;
        position: absolute;
        margin-top: -5px;
        margin-left: -5px;
        z-index: 1;
      }
      &::before {
        content: "";
        width: @PickerAreaWidth;
        height: 100%;
        background-image: linear-gradient(
          to right,
          rgba(255, 255, 255),
          rgba(255, 255, 255, 0)
        );
        position: absolute;
      }
      &::after {
        content: "";
        width: @PickerAreaWidth;
        height: 100%;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0));
        position: absolute;
      }
    }
    .HuePicker {
      width: 15px;
      height: 100%;
      background-image: linear-gradient(
        red,
        #ff0 17%,
        #0f0 33%,
        #0ff 50%,
        #00f 67%,
        #f0f 83%,
        red
      );
      position: relative;
      .slidingBlock {
        width: 100%;
        height: 4px;
        background-color: #fff;
        box-shadow: 0 0 2px rgb(0, 0, 0, 0.6);
        margin-top: -2px;
        position: absolute;
        cursor: pointer;
      }
    }
  }
}
